<template>
	<view class="content">
		<view :style="{
			'height':statusBarHeight+'px' 
		}">

		</view>
		<view class="head">
			<view class="head_left" @click="back">
				<image src="../../static/images/icon_ss_fanhui.png" mode=""></image>
			</view>
			<view class="head_search" v-if="hotSearchList.length">
				<u-search :placeholder="hotSearchList[0].content" bgColor="rgba(0,0,0,0)" :focus="true"
					:showAction="false" v-model="keyword" placeholderColor="#888888"
					searchIcon="../../static/images/icon_ss_sousuokuangzhong.png" searchIconSize="30rpx"></u-search>
			</view>
			<view class="head_right" @click="search">
				搜索
			</view>
		</view>

		<!-- <view class="history">
			<view class="history_title">
				<view>
					<image src="../../static/images/icon_ss_sousuo.png" mode=""></image>
					<text>历史搜索</text>
				</view>
				<view>
					<image src="../../static/images/icon_ss_shanchu.png" mode=""></image>
				</view>
			</view>
			<view class="history_box">
				<view 
				class="history_item" 
				v-for="(item,index) in historySearchList"
				:key="index"
				:class="index%2 == 1?'item':''" >
					{{item.name}}
				</view>
			</view>
		</view>
		
		<view class="history">
			<view class="history_title">
				<view>
					<image src="../../static/images/icon_ss_sousuo.png" mode=""></image>
					<text>大家都在搜</text>
				</view>
			</view>
			<view class="history_box">
				<view 
				class="history_item" 
				v-for="(item,index) in historySearchList"
				:key="index"
				:class="index%2 == 1?'item':''" >
					{{item.name}}
				</view>
			</view>
		</view> -->
		<history v-if="!isSearch" :hotSearchList='hotSearchList' :hisSearchList="hisSearchList" @search="handSearch" @del="del"></history>
		<result v-show="isSearch" ref="search" :headHeight="height" :search="keyword"></result>


		<floatingBall></floatingBall>
	</view>
</template>

<script>
	import history from './history.vue';
	import result from './result.vue'
	import {
		getSearchlog
	} from '@/common/api/search.js'
	export default {
		components: {
			history,
			result
		},
		data() {
			return {
				statusBarHeight: 0,
				keyword: '',
				historySearchList: [{
					name: '福克斯'
				}, {
					name: '黄奕张歆艺愿资助...666'
				}, {
					name: '我国再添4处世界遗址？？？？'
				}, {
					name: '胡冰卿'
				}, {
					name: '每日一善'
				}, {
					name: '这道题选C'
				}, {
					name: '盲盒为什么让年轻人喜欢6666'
				}, {
					name: '杨和苏'
				}],
				isSearch: false,
				height: 0,
				hotSearchList: [],
				hisSearchList: []
			}
		},
		mounted() {
			const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
			const windowHeihgt = statusBarHeight.windowHeight;
			this.statusBarHeight = statusBarHeight.statusBarHeight;
			
			
			setTimeout(() => {
				
			},500)
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.head').fields({
					size: true
				})
							
				query.exec((data) => {
					console.log('datadata',data);
				});
			});
			this.$nextTick(() => {
				uni.createSelectorQuery().select('.head').boundingClientRect(data => {
					console.log('datadata',data);
						this.height = data.height;
				}).exec()
			});

			// this.$nextTick(() => {
			// 	uni
			// 		.createSelectorQuery()
			// 		.in(this)
			// 		.select(".head")
			// 		.boundingClientRect((data) => {
			// 			console.log('datadata', data);
			// 			this.height = data.height;
			// 		})
			// 		.exec();
			// });
		},
		onLoad() {
			this.getLog();
		},
		methods: {
			handSearch(text) {
				this.keyword = text;
				this.$nextTick(() => {
					this.$refs.search.open();
				})
				this.isSearch = true;
			},
			search() {
				console.log('rrrrr',this.keyword);
				if (this.keyword == '') {
					this.keyword = this.hotSearchList[0].content;
				}
				this.$nextTick(() => {
					this.$refs.search.open();
				})
				this.isSearch = true;
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			async getLog() {
				try {
					const res = await getSearchlog();
					console.log('resssss', res);
					this.hotSearchList = res.data.data.hot_search;
					this.hisSearchList = res.data.data.search;
				} catch (e) {

				}
			},
			del() {
				this.getLog();
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		padding: 0 30rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		top: 0;
	}

	.head {
		width: 100%;
		height: 80rpx;
		display: flex;
		padding: 16rpx 0;
		.head_left {
			width: 46rpx;
			height: 100%;
			display: flex;
			align-items: center;

			image {
				width: 22rpx;
				height: 36rpx;
			}
		}

		.head_search {
			flex: 1;
			display: flex;
			align-items: center;
			background: #F4F4F4;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
		}

		.head_right {
			width: 84rpx;
			height: 100%;
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			color: #444444;
			line-height: 44rpx;
		}
	}

	.history {
		width: 100%;
		margin-top: 48rpx;

		.history_title {
			display: flex;
			justify-content: space-between;

			>view {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				color: #444444;

				>image {
					width: 30rpx;
					height: 30rpx;
				}

				>text {
					margin-left: 16rpx;
				}
			}

		}

		.history_box {
			width: 100%;
			padding-right: 33rpx;
			box-sizing: border-box;
			margin-top: 16rpx;
			display: flex;
			flex-wrap: wrap;

			.history_item {
				width: 264rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #444444;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				margin-top: 16rpx;
			}

			.item {
				margin-left: 108rpx;
			}
		}
	}
</style>